<template>
	<div>
		<div class="top">
			<div class="top_1">
				<img src="../../public/img/bot/prev.png" alt="" @click="fanhui">
				<span>{{id}}</span>
			</div>
			<el-row class="block-col-2 nav_1">
				<el-col :span="12" id="el-col-12">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link top_left">
							分类<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown" class="nav_xia">
							<div class="left" v-for="item in datas" :key='item.count'>
								<el-dropdown-item>
									<p>{{item.name}}</p>
								</el-dropdown-item>
							</div>
						</el-dropdown-menu>
					</el-dropdown>
				</el-col>
				<el-col :span="12" class="el-col-12">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link top_left">
							排序<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown" class="nav_xia_x">
							<el-dropdown-item><span>&#xe613;</span>智能排序</el-dropdown-item>
							<el-dropdown-item><span>&#xe611;</span>距离最近</el-dropdown-item>
							<el-dropdown-item><span>&#xe660;</span>销量最高</el-dropdown-item>
							<el-dropdown-item><span>&#xe640;</span>起送价最低</el-dropdown-item>
							<el-dropdown-item><span>&#xe608;</span>配送速度最快</el-dropdown-item>
							<el-dropdown-item><span>&#xe627;</span>评分最高</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-col>
				<el-col :span="12" class="el-col-12">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link top_left">
							筛选<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown" class="nav_xia_z">
							<el-dropdown-item>
								<p>配送方式</p>
								<buttom>蜂鸟专送</buttom>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-col>
			</el-row>
		</div>
		<div class="store">
			<b_dip1></b_dip1>
		</div>

	</div>
</template>

<script>
	import b_dip1 from "../components/b_dianpu.vue"
	export default {
		name: 'top',
		components: {
			b_dip1
		},
		props: ['id'],
		data: function() {
			return {
				datas: []
			}
		},
		created() {
			let obj = this;
			this.$axios({
				url: 'https://elm.cangdu.org/shopping/v2/restaurant/category',
				method: 'get',
			}).then(function(res) {
				for (let i = 0; i < res.data.length; i++) {
					obj.datas.push(res.data[i]);
				}
			})
		},
		methods: {
			fanhui() {
				this.$router.go(-1);
			},
		}

	}
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont';
		/* project id 1572186 */
		src: url('https://at.alicdn.com/t/font_1572186_khw8pv0w1wt.eot');
		src: url('https://at.alicdn.com/t/font_1572186_khw8pv0w1wt.eot?#iefix') format('embedded-opentype'),
			url('https://at.alicdn.com/t/font_1572186_khw8pv0w1wt.woff2') format('woff2'),
			url('https://at.alicdn.com/t/font_1572186_khw8pv0w1wt.woff') format('woff'),
			url('https://at.alicdn.com/t/font_1572186_khw8pv0w1wt.ttf') format('truetype'),
			url('https://at.alicdn.com/t/font_1572186_khw8pv0w1wt.svg#iconfont') format('svg');
	}

	ul {
		position: fixed !important;
		left: 0 !important;
		z-index: 1001 !important;
		top: 60px !important;
		color: transparent;
		text-shadow: #111 0 !important;
	}

	.top {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1001;
	}

	.store {
		margin-top: 75px;
	}

	.top_1 {
		width: 100%;
		background: #3190e8;
		text-align: center;
		color: white;
	}

	.top_1 span {
		font-size: 15px;
		line-height: 40px;
	}

	.top_1 img {
		position: absolute;
		left: 0;
		top: 10px;
		width: 7%;
	}

	.el-col {
		width: 33%;
		text-align: center;
		line-height: 30px;
	}

	.nav_1 {
		background: #fff;
	}

	.nav_xia {
		width: 100%;
		left: 0;

	}

	.nav_xia_x {
		width: 100%;
	}

	.nav_xia_x span {
		font-family: 'iconfont';
		color: #3190e8;
		margin-right: 10px;
	}

	.nav_xia_x li {
		border-bottom: 1px solid #F1F1F1;
	}

	.left {
		width: 50%;
	}

	.left p {
		color: #000000;
	}

	.nav_xia_z {
		width: 100%;
	}
</style>
